<template>
  <div class="brother-b">
    <h3>🧒 兄弟 B（使用 mitt）</h3>
    <p v-if="message" class="received">📬 收到：{{ message }}</p>
    <p v-else class="waiting">⏳ 等待兄弟 A 的消息...</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import mittBus from '@/eventbus/mittBus.js'

const message = ref('')

// 组件挂载时监听事件
onMounted(() => {
  mittBus.on('mitt-message', (msg) => {
    message.value = msg
  })
})

// 组件卸载时清理事件（避免内存泄漏）
onUnmounted(() => {
  mittBus.off('mitt-message')
})
</script>

<style scoped>
.brother-b {
  border: 2px solid #4ecdc4;
  padding: 20px;
  border-radius: 8px;
}
.received {
  background-color: #d1ecf1;
  padding: 12px;
  border-radius: 6px;
  color: #0c5460;
  margin-top: 10px;
  font-weight: 500;
}
.waiting {
  color: #888;
  font-style: italic;
}
</style>
